<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">This demo shows the default functionality of jqxToolBar. This
        widget represents a toolbar where different tools (including widgets) can be automatically
        added. By default, jqxToolBar supports the widgets jqxButton, jqxToggleButton, jqxDropDownList,
        jqxComboBox and jqxInput. Custom tools can also be added.</title>
    <meta name="description" content="This demo shows the default functionality of jqxToolBar. This widget represents a toolbar where different tools (including widgets) can be automatically added. By default, jqxToolBar supports the widgets jqxButton, jqxToggleButton, jqxDropDownList, jqxComboBox and jqxInput. Custom tools can also be added." />
    <link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.base.css" />
    <style type="text/css">
        .buttonIcon
        {
            margin: -5px 0 0 -3px;
            width: 16px;
            height: 17px;
        }
    </style>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtoolbar.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#jqxToolBar").jqxToolBar({
                width: 800, height: 35, tools: 'toggleButton toggleButton toggleButton | toggleButton | dropdownlist combobox | input | custom',
                initTools: function (type, index, tool, menuToolIninitialization) {
                    if (type == "toggleButton") {
                        var icon = $("<div class='jqx-editor-toolbar-icon jqx-editor-toolbar-icon-" + theme + " buttonIcon'></div>");
                    }
                    switch (index) {
                        case 0:
                            icon.addClass("jqx-editor-toolbar-icon-bold jqx-editor-toolbar-icon-bold-" + theme);
                            icon.attr("title", "Bold");
                            tool.append(icon);
                            break;
                        case 1:
                            icon.addClass("jqx-editor-toolbar-icon-italic jqx-editor-toolbar-icon-italic-" + theme);
                            icon.attr("title", "Italic");
                            tool.append(icon);
                            break;
                        case 2:
                            icon.addClass("jqx-editor-toolbar-icon-underline jqx-editor-toolbar-icon-underline-" + theme);
                            icon.attr("title", "Underline");
                            tool.append(icon);
                            break;
                        case 3:
                            tool.jqxToggleButton({ width: 80, toggled: true });
                            tool.text("Enabled");
                            tool.on("click", function () {
                                var toggled = tool.jqxToggleButton("toggled");
                                if (toggled) {
                                    tool.text("Enabled");
                                } else {
                                    tool.text("Disabled");
                                }
                            });
                            break;
                        case 4:
                            tool.jqxDropDownList({ width: 130, source: ["<span style='font-family: Courier New;'>Courier New</span>", "<span style='font-family: Times New Roman;'>Times New Roman</span>", "<span style='font-family: Verdana;'>Verdana</span>"], selectedIndex: 1 });
                            break;
                        case 5:
                            tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 });
                            break;
                        case 6:
                            tool.jqxInput({ width: 200, placeHolder: "Type here to search..." });
                            break;
                        case 7:
                            var button = $("<div>" + "<img src='../../images/administrator.png' title='Custom tool' />" + "</div>");
                            tool.append(button);
                            button.jqxButton({ height: 15 });
                            break;
                    }
                }
            });
        });
    </script>
</head>
<body>
    <div id="jqxToolBar">
    </div>
</body>
</html>